<template>
  <div class="custom-block">
    <div v-for="color in Object.keys(colors)" :key="color" class="grid grid-cols-10 gap-4">
      <h4 class="w-full capitalize col-span-10 mt-8 text-xl">{{ color }}</h4>
      <ColorPaletteBlock
        v-for="shade in Object.keys(colors[color])"
        :key="shade"
        class="col-span-5 md:col-span-3 xl:col-span-2"
        :rgb-color="colors[color][shade]"
        :name="`${color}-${shade}`"
      />
    </div>
  </div>
</template>

<script>
import ColorPaletteBlock from './ColorPaletteBlock.vue';
// copied over from: packages/config/tailwind/index.ts
const colors = {
  primary: {
    '50': '240 253 244',
    '100': '220 252 231',
    '200': '187 247 208',
    '300': '134 239 172',
    '400': '74 222 128',
    '500': '2 198 82',
    '600': '10 171 69',
    '700': '1 137 55',
    '800': '22 101 52',
    '900': '20 83 45',
  },
  secondary: {
    '50': '245 243 255',
    '100': '237 233 254',
    '200': '221 214 254',
    '300': '196 181 253',
    '400': '167 139 250',
    '500': '135 92 246',
    '600': '111 64 236',
    '700': '97 49 221',
    '800': '83 30 211',
    '900': '68 21 178',
  },
  positive: {
    '50': '240 253 244',
    '100': '220 252 231',
    '200': '187 247 208',
    '300': '134 239 172',
    '400': '74 222 128',
    '500': '2 198 82',
    '600': '10 171 69',
    '700': '1 137 55',
    '800': '22 101 52',
    '900': '20 83 45',
  },
  negative: {
    '50': '255 241 242',
    '100': '255 228 230',
    '200': '254 205 211',
    '300': '253 164 175',
    '400': '251 113 133',
    '500': '244 63 94',
    '600': '225 29 72',
    '700': '190 18 60',
    '800': '159 18 57',
    '900': '136 19 55',
  },
  warning: {
    '50': '254 252 232',
    '100': '254 249 195',
    '200': '254 240 138',
    '300': '253 224 71',
    '400': '250 204 21',
    '500': '234 179 8',
    '600': '202 138 4',
    '700': '161 98 7',
    '800': '133 77 14',
    '900': '113 63 18',
  },
  neutral: {
    '50': '250 250 250',
    '100': '244 244 245',
    '200': '228 228 231',
    '300': '212 212 216',
    '400': '161 161 170',
    '500': '113 113 122',
    '600': '82 82 91',
    '700': '63 63 70',
    '800': '39 39 42',
    '900': '24 24 27',
  },
  disabled: {
    '50': '250 250 250',
    '100': '244 244 245',
    '200': '228 228 231',
    '300': '212 212 216',
    '400': '161 161 170',
    '500': '113 113 122',
    '600': '82 82 91',
    '700': '63 63 70',
    '800': '39 39 42',
    '900': '24 24 27',
  },
};
export default {
  components: {
    ColorPaletteBlock,
  },
  data() {
    return {
      colors,
    };
  },
};
</script>
